<template>
	<div class="switch" @click="click()" :class="[state ? 'off' : 'on']">
		<span v-show="state">off</span><span v-show="!state">on</span>
		<div class="circle" :class="[state ? 'circle-right' : 'circle-left']"></div>
	</div>
</template>
<script>
	export default {
		data: function () {
			return {
				state: this.states ? this.states : false
			}
		},
		props: ['states'],
		methods: {
			click: function () {
				// 点击切换开关状态
				this.state = !this.state
				// 把修改的数据返回给父组件
				this.$emit('message', this.state)
			}
		}
	}
</script>
<style>
	.switch {
		width:60px;
		height:26px;
		border:1px solid;
		position: relative;
		text-align: center;
		border-radius: 13px;
	}
	.switch>span {
		line-height: 26px;
		position: absolute;
	}
	.switch>span:nth-child(1) {
		left: 10px;
		color: #ccc;
	}
	.switch>span:nth-child(2) {
		right: 10px;
		color: #26a2ff;
	}
	.circle {
		position: absolute;
		top:2px;
		height: 20px;
		width: 20px;
		border-radius: 10px;
	}
	.circle-left {
		left: 3px;
		background-color: #26a2ff;
	}
	.circle-right {
		right: 3px;
		background-color: #ccc;
	}
	.on {
		border-color: #26a2ff;
	}
	.off {
		border-color: #ccc;
	}
	
</style>
